<template>
	<view class="index">
		<view class="main">
			<!-- 列表开始 -->
			<!-- 01 任务登记/任务派发 -->
			<!-- 任务登记/任务派发 -->
			<view class="card">
				<view class="card-header">
					<text class="card-title">{{ title1 }}</text>
					<!-- <text class="card-action" @click="onViewDetail(1)">查看</text> -->
				</view>
				<view class="card-content blue">
					<view class="big-number">{{ taskDispatch.total }}</view>
					<text>个</text>
				</view>
				<view class="card-footer">
					<text>任务中: {{ taskDispatch.inProgress }}</text>
					<text>未开始: {{ taskDispatch.notStarted }}</text>
					<text>已完成: {{ taskDispatch.completed }}</text>
					<text>终止: {{ taskDispatch.stop }}</text>
				</view>
				<view class="progress-list">
					<view class="progress-item">
						<text>任务中:</text>
						<progress :percent="taskDispatchProgressPercentage.inProgress" show-info />
					</view>
					<view class="progress-item">
						<text>未开始:</text>
						<progress :percent="taskDispatchProgressPercentage.notStarted" show-info />
					</view>
					<view class="progress-item">
						<text>已完成:</text>
						<progress :percent="taskDispatchProgressPercentage.completed" show-info />
					</view>
					<view class="progress-item">
						<text>终止:</text>
						<progress :percent="taskDispatchProgressPercentage.stop" show-info />
					</view>
				</view>
			</view>

			<!-- 采样监测 -->
			<view class="card">
				<view class="card-header">
					<text class="card-title">{{ title2 }}</text>
					<!-- <text class="card-action" @click="onViewDetail(2)">查看</text> -->
				</view>
				<view class="card-content blue">
					<view class="big-number">{{ samplingMonitoring.total }}</view>
					<text>个</text>
				</view>
				<view class="card-footer">
					<text>任务中: {{ samplingMonitoring.inProgress }}</text>
					<text>未开始: {{ samplingMonitoring.notStarted }}</text>
					<text>已完成: {{ samplingMonitoring.completed }}</text>
					<text>挂起: {{ samplingMonitoring.pending }}</text>
				</view>
				<view class="progress-list">
					<view class="progress-item">
						<text>任务中:</text>
						<progress :percent="samplingMonitoringProgressPercentage.inProgress" show-info />
					</view>
					<view class="progress-item">
						<text>未开始:</text>
						<progress :percent="samplingMonitoringProgressPercentage.notStarted" show-info />
					</view>
					<view class="progress-item">
						<text>已完成:</text>
						<progress :percent="samplingMonitoringProgressPercentage.completed" show-info />
					</view>
					<view class="progress-item">
						<text>挂起:</text>
						<progress :percent="samplingMonitoringProgressPercentage.pending" show-info />
					</view>
				</view>
			</view>

			<!-- 交接流转 -->
			<view class="card">
				<view class="card-header">
					<text class="card-title">{{ title3 }}</text>
					<!-- <text class="card-action" @click="onViewDetail(3)">查看</text> -->
				</view>
				<view class="card-content blue">
					<view class="big-number">{{ handover.total }}</view>
					<text>个</text>
				</view>
				<view class="card-footer">
					<text>未提交: {{ handover.notSubmitted }}</text>
					<text>已提交: {{ handover.Submitted }}</text>
				</view>
				<view class="progress-list">
					<view class="progress-item">
						<text>未提交:</text>
						<progress :percent="handoverProgressPercentage.notSubmitted" show-info />
					</view>
					<view class="progress-item">
						<text>已提交:</text>
						<progress :percent="handoverProgressPercentage.Submitted" show-info />
					</view>
				</view>
			</view>

			<!-- 实验分析 -->
			<view class="card">
				<view class="card-header">
					<text class="card-title">{{ title4 }}</text>
					<!-- <text class="card-action" @click="onViewDetail(4)">查看</text> -->
				</view>
				<view class="card-content blue">
					<view class="big-number">{{ experimentalAnalysis.total }}</view>
					<text>个</text>
				</view>
				<view class="card-footer">
					<text>任务中: {{ experimentalAnalysis.inProgress }}</text>
					<text>未开始: {{ experimentalAnalysis.notStarted }}</text>
					<text>已完成: {{ experimentalAnalysis.completed }}</text>
					<text>挂起: {{ experimentalAnalysis.pending }}</text>
				</view>
				<view class="progress-list">
					<view class="progress-item">
						<text>任务中:</text>
						<progress :percent="experimentalAnalysisProgressPercentage.inProgress" show-info />
					</view>
					<view class="progress-item">
						<text>未开始:</text>
						<progress :percent="experimentalAnalysisProgressPercentage.notStarted" show-info />
					</view>
					<view class="progress-item">
						<text>已完成:</text>
						<progress :percent="experimentalAnalysisProgressPercentage.completed" show-info />
					</view>
					<view class="progress-item">
						<text>挂起:</text>
						<progress :percent="experimentalAnalysisProgressPercentage.pending" show-info />
					</view>
				</view>
			</view>

			<!-- 监测报告 -->
			<view class="card">
				<view class="card-header">
					<text class="card-title">{{ title5 }}</text>
					<!-- <text class="card-action" @click="onViewDetail(5)">查看</text> -->
				</view>
				<view class="card-content blue">
					<view class="big-number">{{ monitoringReport.total }}</view>
					<text>个</text>
				</view>
				<view class="card-footer">
					<text>任务中: {{ monitoringReport.inProgress }}</text>
					<text>未开始: {{ monitoringReport.notStarted }}</text>
					<text>已完成: {{ monitoringReport.completed }}</text>
					<text>挂起: {{ monitoringReport.pending }}</text>
				</view>
				<view class="progress-list">
					<view class="progress-item">
						<text>任务中:</text>
						<progress :percent="monitoringReportProgressPercentage.inProgress" show-info />
					</view>
					<view class="progress-item">
						<text>未开始:</text>
						<progress :percent="monitoringReportProgressPercentage.notStarted" show-info />
					</view>
					<view class="progress-item">
						<text>已完成:</text>
						<progress :percent="monitoringReportProgressPercentage.completed" show-info />
					</view>
					<view class="progress-item">
						<text>挂起:</text>
						<progress :percent="monitoringReportProgressPercentage.pending" show-info />
					</view>
				</view>
			</view>
			<!-- 列表结束 -->
			<!-- 图标区域 -->

			<!-- 底部打卡按钮 -->
			<!-- <view class="button-group">
				<button class="btn">查看派发任务数量统计</button>
				<button class="btn">查看任务告警清单</button>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		list
	} from '@/api/business'
	import {
		selectTaskDispatch,
		getPieData,
		selectSamplingMonitoring,
		selectHandover,
		selectExperimentalAnalysis,
		selectMonitoringReport
	} from "@/api/home";
	import {
		wxLoginGetCode,
		queryAuthorize
	} from "@/api/system/wechat"
	export default {
		data() {
			return {
				activeTab: 'status',
				pieChart: null,
				pieData: {
					'status': [{
							value: 70,
							name: '完成'
						},
						{
							value: 30,
							name: '未完成'
						},
					],
					'detectionProperties': [{
							value: 30,
							name: '环评'
						},
						{
							value: 15,
							name: '验收'
						},
						{
							value: 25,
							name: '自行监测'
						},
						{
							value: 25,
							name: '监督性检测'
						},
						{
							value: 20,
							name: '执法'
						},
					],
					'detectionMethod': [{
							value: 50,
							name: '采样'
						},
						{
							value: 50,
							name: '自送样'
						},
					],
				},
				taskDispatch: {
					total: 0, //总数
					inProgress: 0, //任务中
					notStarted: 0, // 未开始
					completed: 0, //已完成
					stop: 0, //终止
				},
				taskDispatchProgressPercentage: {
					inProgress: 0, //任务中
					notStarted: 0, // 未开始
					completed: 0, //已完成
					stop: 0, //终止
				},
				//pending
				samplingMonitoring: {
					total: 0, //总数
					inProgress: 0, //任务重
					notStarted: 0, // 未开始
					completed: 0, //已完成
					pending: 0, //挂起
				},
				samplingMonitoringProgressPercentage: {
					inProgress: 0, //任务重
					notStarted: 0, // 未开始
					completed: 0, //已完成
					pending: 0, //挂起
				},
				handover: {
					total: 0,
					notSubmitted: 0, //未提交
					Submitted: 0, //一已提交
				},
				handoverProgressPercentage: {
					notSubmitted: 0, //未提交
					Submitted: 0, //一已提交
				},
				experimentalAnalysis: {
					total: 0,
					inProgress: 0, //任务重
					notStarted: 0, // 未开始
					completed: 0, //已完成
					pending: 0, //挂起 
				},
				experimentalAnalysisProgressPercentage: {
					inProgress: 0, //任务重
					notStarted: 0, // 未开始
					completed: 0, //已完成
					pending: 0, //挂起 
				},
				monitoringReport: {
					total: 0,
					inProgress: 0, //任务重
					notStarted: 0, // 未开始
					completed: 0, //已完成
					pending: 0, //挂起 
				},
				monitoringReportProgressPercentage: {
					inProgress: 0, //任务重
					notStarted: 0, // 未开始
					completed: 0, //已完成
					pending: 0, //挂起 
				},
				currentPage: 'home',
				title1: '任务登记/任务派发',
				title2: '采样监测',
				title3: '交接流转',
				title4: '实验分析',
				title5: '监测报告',
			};
		},

		onLoad() {
			// 页面加载时调用接口  
			this.list()
			this.getStatCards();
			this.getPieData();
			this.queryAuthorize();    //本地测试可以注释掉
		},
		onReady() {

		},
		methods: {
			
			queryAuthorize() {
				queryAuthorize().then(response => {
					console.log("queryAuthorize + response:==" + response)
					if (response !== "000000") {
						// 弹出对话框  
						uni.showModal({
							title: '授权提示',
							content: '需要授权公众号才能继续操作',
							showCancel: false, // 不显示取消按钮  
							confirmText: '去授权', // 设置按钮文本  
							success: (res) => {
								if (res.confirm) {
					 			// 点击确认按钮后跳转页面  
									console.log("点击确认按钮后跳转页面")
									this.toauthorize(response)
								}
							}
						});
					}

				})
			},
			toauthorize(response) {
				const appId = 'wxe9c60e7970f21d74'; // 公众号的 AppID  
				const userName = response; // 示例参数
				const redirectUri = encodeURIComponent(
				`https://wxy.moheweb.com/prod-api/wechat/wechat/callback?userName=${userName}`); // 回调地址  
			
				// 构建网页授权链接  
				const url =
					`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
			
				// 使用 uni.navigateTo 打开外部链接  
				uni.navigateTo({
				url: '/pages/webview/webview?url=' + encodeURIComponent(url)
				});
			},
			
			getPieData() {
				getPieData().then(response => {
					this.pieData['status'][0] = {
						value: response.data.completed,
						name: '已完成'
					}
					this.pieData['status'][1] = {
						value: response.data.noCompleted,
						name: '未完成'
					}
					this.pieData['detectionProperties'][0] = {
						value: response.data.huanping,
						name: '环评'
					}
					this.pieData['detectionProperties'][1] = {
						value: response.data.yanshou,
						name: '验收'
					}
					this.pieData['detectionProperties'][2] = {
						value: response.data.zixing,
						name: '自行检测'
					}
					this.pieData['detectionProperties'][3] = {
						value: response.data.jiandu,
						name: '监督性检测'
					}
					this.pieData['detectionProperties'][4] = {
						value: response.data.zhifa,
						name: '执法'
					}
					this.pieData['detectionMethod'][0] = {
						value: response.data.caiyang,
						name: '采样'
					}
					this.pieData['detectionMethod'][1] = {
						value: response.data.zisong,
						name: '自送样'
					}
					console.log(this.pieData);
				}).catch(() => {
					this.$message.error('获取数据失败');
				});
			},
			getStatCards() {
				selectTaskDispatch().then(response => {
					this.taskDispatch = response.data;
					this.calculateProgressPercentage(response, 0);
				}).catch(() => {
					uni.showModal({
						title: '提示',
						content: '获取Business数据失败',
						showCancel: false // 不显示取消按钮  
					});
				});
				selectSamplingMonitoring().then(response => {
					this.samplingMonitoring = response.data;
					this.calculateProgressPercentage(response, 1);
				}).catch(() => {
					uni.showModal({
						title: '提示',
						content: '获取Business数据失败',
						showCancel: false // 不显示取消按钮  
					});
				});
				selectHandover().then(response => {
					this.handover = response.data;
					this.calculateProgressPercentage(response, 2);
				}).catch(() => {
					uni.showModal({
						title: '提示',
						content: '获取Business数据失败',
						showCancel: false // 不显示取消按钮  
					});
				});
				selectExperimentalAnalysis().then(response => {
					this.experimentalAnalysis = response.data;
					this.calculateProgressPercentage(response, 3);
				}).catch(() => {
					uni.showModal({
						title: '提示',
						content: '获取Business数据失败',
						showCancel: false // 不显示取消按钮  
					});
				});
				selectMonitoringReport().then(response => {
					this.monitoringReport = response.data;
					this.calculateProgressPercentage(response, 4);
				}).catch(() => {
					uni.showModal({
						title: '提示',
						content: '获取Business数据失败',
						showCancel: false // 不显示取消按钮  
					});
				});
			},
			calculatePercentage(count, type) {
				let percentage = 0;

				if (type === 0) {
					percentage = count ? (Math.max(0, (count / this.taskDispatch.total) * 100) || 0) : 0;
				} else if (type === 1) {
					percentage = count ? (Math.max(0, (count / this.samplingMonitoring.total) * 100) || 0) : 0;
				} else if (type === 2) {
					percentage = count ? (Math.max(0, (count / this.handover.total) * 100) || 0) : 0;
				} else if (type === 3) {
					percentage = count ? (Math.max(0, (count / this.experimentalAnalysis.total) * 100) || 0) : 0;
				} else if (type === 4) {
					percentage = count ? (Math.max(0, (count / this.monitoringReport.total) * 100) || 0) : 0;
				}

				// 保留两位小数  
				return parseFloat(percentage.toFixed(2));

			},
			calculateProgressPercentage(response, type) {
				if (type === 0) {
					this.taskDispatchProgressPercentage.inProgress = this.calculatePercentage(response.data.inProgress, 0);
					this.taskDispatchProgressPercentage.notStarted = this.calculatePercentage(response.data.notStarted, 0);
					this.taskDispatchProgressPercentage.completed = this.calculatePercentage(response.data.completed, 0);
					this.taskDispatchProgressPercentage.stop = this.calculatePercentage(response.data.stop, 0);
				} else if (type === 1) {
					this.samplingMonitoringProgressPercentage.inProgress = this.calculatePercentage(response.data
						.inProgress, 1);
					this.samplingMonitoringProgressPercentage.notStarted = this.calculatePercentage(response.data
						.notStarted, 1);
					this.samplingMonitoringProgressPercentage.completed = this.calculatePercentage(response.data.completed,
						1);
					this.samplingMonitoringProgressPercentage.stop = this.calculatePercentage(response.data.stop, 1);

				} else if (type === 2) {
					this.handoverProgressPercentage.inProgress = this.calculatePercentage(response.data.inProgress, 2);
					this.handoverProgressPercentage.notStarted = this.calculatePercentage(response.data.notStarted, 2);
					this.handoverProgressPercentage.completed = this.calculatePercentage(response.data.completed, 2);
					this.handoverProgressPercentage.stop = this.calculatePercentage(response.data.stop, 2);

				} else if (type === 3) {
					this.experimentalAnalysisProgressPercentage.inProgress = this.calculatePercentage(response.data
						.inProgress, 3);
					this.experimentalAnalysisProgressPercentage.notStarted = this.calculatePercentage(response.data
						.notStarted, 3);
					this.experimentalAnalysisProgressPercentage.completed = this.calculatePercentage(response.data
						.completed, 3);
					this.experimentalAnalysisProgressPercentage.stop = this.calculatePercentage(response.data.stop, 3);

				} else if (type === 4) {
					this.monitoringReportProgressPercentage.inProgress = this.calculatePercentage(response.data.inProgress,
						4);
					this.monitoringReportProgressPercentage.notStarted = this.calculatePercentage(response.data.notStarted,
						4);
					this.monitoringReportProgressPercentage.completed = this.calculatePercentage(response.data.completed,
						4);
					this.monitoringReportProgressPercentage.stop = this.calculatePercentage(response.data.stop, 4);

				}

			},


			// 登录成功后，处理函数
			list() {
				list().then(res => {
					console.log(res)
				})
			},

			onViewDetail(id) {
				// 点击查看的处理逻辑，只启动弹框或跳转到相应页面  
				console.log(`查看详情: ${id}`);
				// TODO: 实现跳转逻辑，例如: uni.navigateTo 或 uni.switchTab  
			},
		}

	};
</script>

<style>
	/* 页面主结构 */
	.index {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.main {
		flex: 1;
		padding: 10px;
		background-color: #f5f5f5;
	}

	/* 卡片样式 */
	.card {
		margin-bottom: 10px;
		background-color: #fff;
		border-radius: 8px;
		padding: 10px;
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 5px;
		border-bottom: 1px solid #eee;
	}

	.card-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}

	.card-action {
		font-size: 14px;
		color: #007aff;
	}

	/* 卡片内容 */
	.card-content {
		display: flex;
		align-items: center;
		margin: 10px 0;
	}

	.big-number {
		font-size: 24px;
		font-weight: bold;
		color: royalblue;
		margin-right: 5px;
	}

	/* 卡片底部 */
	.card-footer {
		font-size: 12px;
		color: #666;
		display: flex;
		justify-content: space-between;
	}

	/* 按钮组 */
	.button-group {
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
	}

	.btn {
		flex: 1;
		background-color: #007aff;
		color: #fff;
		text-align: center;
		padding: 10px 0;
		font-size: 14px;
		border-radius: 4px;
		margin: 0 5px;
	}

	.container {
		padding: 20px;
	}

	button {
		padding: 10px;
		background-color: #007aff;
		color: white;
		border: none;
		border-radius: 5px;
	}
</style>
